<template>
  <div class="admin-layout">
    <!-- 侧边栏 -->
    <div class="sidebar" :class="{ 'is-collapsed': isCollapsed }">
      <div class="logo-container">
        <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" class="logo" alt="Logo">
        <h1 v-if="!isCollapsed" class="title">校园外卖管理系统</h1>
      </div>
      
      <el-menu
        :default-active="activeMenu"
        class="sidebar-menu"
        :collapse="isCollapsed"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
        router>
        
        <el-menu-item index="/admin/dashboard">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        
        <el-submenu index="user">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/admin/users">用户列表</el-menu-item>
        </el-submenu>
        
        <el-submenu index="merchant">
          <template slot="title">
            <i class="el-icon-house"></i>
            <span>商家管理</span>
          </template>
          <el-menu-item index="/admin/merchants">商家列表</el-menu-item>
        </el-submenu>
        
        <el-submenu index="order">
          <template slot="title">
            <i class="el-icon-s-order"></i>
            <span>订单管理</span>
          </template>
          <el-menu-item index="/admin/orders">订单列表</el-menu-item>
        </el-submenu>
        
        <el-menu-item index="/admin/banners">
          <i class="el-icon-picture"></i>
          <span slot="title">轮播图管理</span>
        </el-menu-item>
        
        <!-- <el-menu-item index="/admin/statistics">
          <i class="el-icon-data-analysis"></i>
          <span slot="title">统计分析</span>
        </el-menu-item> -->
        
        <!-- <el-menu-item index="/admin/settings">
          <i class="el-icon-setting"></i>
          <span slot="title">系统设置</span>
        </el-menu-item> -->
      </el-menu>
    </div>
    
    <!-- 主内容区 -->
    <div class="main-container" :class="{ 'is-collapsed': isCollapsed }">
      <!-- 顶部导航栏 -->
      <div class="navbar">
        <div class="left-area">
          <i
            :class="isCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
            class="collapse-btn"
            @click="toggleSidebar">
          </i>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index">{{ item }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        
        <div class="right-area">
          <el-dropdown trigger="click" @command="handleCommand">
            <div class="avatar-container">
              <img :src="userAvatar" class="avatar" alt="Avatar">
              <span class="username">{{ username }}</span>
              <i class="el-icon-caret-bottom"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="profile">个人信息</el-dropdown-item>
              <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
              <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      
      <!-- 内容区域 -->
      <div class="content-container">
        <router-view></router-view>
      </div>
    </div>
    
    <!-- 修改密码对话框 -->
    <el-dialog
      title="修改密码"
      :visible.sync="changePasswordVisible"
      width="500px">
      <el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="100px">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input v-model="passwordForm.oldPassword" type="password" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passwordForm.newPassword" type="password" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="passwordForm.confirmPassword" type="password" show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changePasswordVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitChangePassword">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'AdminLayout',
  data() {
    // 验证确认密码
    const validateConfirmPassword = (rule, value, callback) => {
      if (value !== this.passwordForm.newPassword) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    
    return {
      // 侧边栏折叠状态
      isCollapsed: false,
      // 面包屑导航
      breadcrumbs: [],
      // 用户头像
      userAvatar: JSON.parse(sessionStorage.getItem('user')).avatar,
      // 用户名
      username: '管理员',
      // 修改密码对话框可见性
      changePasswordVisible: false,
      // 密码表单
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      // 密码表单验证规则
      passwordRules: {
        oldPassword: [
          { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: validateConfirmPassword, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    // 当前激活的菜单
    activeMenu() {
      return this.$route.path
    }
  },
  watch: {
    // 监听路由变化，更新面包屑导航
    '$route'() {
      this.updateBreadcrumbs()
    }
  },
  created() {
    // 初始化面包屑导航
    this.updateBreadcrumbs()
    
    // 获取用户信息
    this.getUserInfo()
  },
  methods: {
    // 切换侧边栏折叠状态
    toggleSidebar() {
      this.isCollapsed = !this.isCollapsed
    },
    
    // 更新面包屑导航
    updateBreadcrumbs() {
      const path = this.$route.path
      const breadcrumbs = []
      
      if (path.includes('/admin/dashboard')) {
        breadcrumbs.push('首页')
      } else if (path.includes('/admin/users')) {
        breadcrumbs.push('用户管理', '用户列表')
      } else if (path.includes('/admin/merchants')) {
        breadcrumbs.push('商家管理', '商家列表')
      } else if (path.includes('/admin/orders')) {
        breadcrumbs.push('订单管理', '订单列表')
      } else if (path.includes('/admin/statistics')) {
        breadcrumbs.push('统计分析')
      } else if (path.includes('/admin/banners')) {
        breadcrumbs.push('轮播图管理')
      } else if (path.includes('/admin/settings')) {
        breadcrumbs.push('系统设置')
      }
      
      this.breadcrumbs = breadcrumbs
    },
    
    // 获取用户信息
    getUserInfo() {
      // 这里应该调用后端API获取用户信息
      // 模拟数据
      this.username = '管理员'
      this.userAvatar = JSON.parse(sessionStorage.getItem('user')).avatar
    },
    
    // 处理下拉菜单命令
    handleCommand(command) {
      switch (command) {
        case 'profile':
          // 跳转到个人信息页面
          this.$router.push('/admin/profile')
          break
        case 'changePassword':
          // 显示修改密码对话框
          this.changePasswordVisible = true
          break
        case 'logout':
          // 退出登录
          this.logout()
          break
      }
    },
    
    // 提交修改密码
    submitChangePassword() {
      this.$refs.passwordForm.validate(valid => {
        if (valid) {
          // 这里应该调用后端API修改密码
          this.$message.success('密码修改成功')
          this.changePasswordVisible = false
          
          // 清空表单
          this.passwordForm = {
            oldPassword: '',
            newPassword: '',
            confirmPassword: ''
          }
        } else {
          return false
        }
      })
    },
    
    // 退出登录
    logout() {
      this.$confirm('确认退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里应该调用后端API退出登录
        this.$store.commit('CLEAR_USER_INFO')
        this.$message.success('退出登录成功')
        this.$router.push('/login')
      }).catch(() => {
        // 取消退出登录
      })
    }
  }
}
</script>

<style scoped>
.admin-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  width: 210px;
  height: 100%;
  background-color: #304156;
  transition: width 0.3s;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar.is-collapsed {
  width: 64px;
}

.logo-container {
  height: 60px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #263445;
}

.logo {
  width: 32px;
  height: 32px;
}

.title {
  margin-left: 10px;
  color: #fff;
  font-size: 16px;
  white-space: nowrap;
}

.sidebar-menu {
  border-right: none;
}

.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-left: 0;
  transition: margin-left 0.3s;
}

.navbar {
  height: 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  background-color: #fff;
}

.left-area {
  display: flex;
  align-items: center;
}

.collapse-btn {
  font-size: 20px;
  cursor: pointer;
  margin-right: 20px;
  color: #606266;
}

.right-area {
  display: flex;
  align-items: center;
}

.avatar-container {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
}

.username {
  margin-right: 8px;
  font-size: 14px;
  color: #606266;
}

.content-container {
  flex: 1;
  padding: 0;
  overflow-y: auto;
  background-color: #f0f2f5;
}
</style>